<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()

// 收藏商品列表
const products = ref([])

// 分页参数
const pagination = ref({
  currentPage: 1,
  pageSize: 12,
  total: 0
})

// 筛选条件
const filters = ref({
  brand: '',
  priceRange: [0, 5000],
  sortBy: 'default'
})

// 品牌选项
const brandOptions = [
  { label: '全部', value: '' },
  { label: 'Nike', value: 'Nike' },
  { label: 'Adidas', value: 'Adidas' },
  { label: 'New Balance', value: 'New Balance' },
  { label: 'Converse', value: 'Converse' },
  { label: 'Vans', value: 'Vans' },
  { label: 'Puma', value: 'Puma' }
]

// 排序选项
const sortOptions = [
  { label: '默认排序', value: 'default' },
  { label: '价格从低到高', value: 'price-asc' },
  { label: '价格从高到低', value: 'price-desc' },
  { label: '收藏时间最新', value: 'time-desc' }
]

// 加载收藏商品
const loadProducts = () => {
  // 这里应该调用API获取收藏商品列表
  // API调用后端
  // getFavoriteProductsAPI({
  //   currentPage: pagination.value.currentPage,
  //   pageSize: pagination.value.pageSize,
  //   brand: filters.value.brand,
  //   priceRange: filters.value.priceRange,
  //   sortBy: filters.value.sortBy
  // }).then(res => {
  //   products.value = res.data.list
  //   pagination.value.total = res.data.total
  // })
  
  // 模拟数据
  products.value = Array(12).fill(null).map((_, index) => ({
    id: index + 1,
    name: ['Air Jordan 1', 'Ultra Boost', 'Dunk Low', 'New Balance 550'][index % 4],
    brand: ['Nike', 'Adidas', 'Nike', 'New Balance'][index % 4],
    price: Math.floor(Math.random() * 1000) + 500,
    image: `https://via.placeholder.com/300x300?text=Product${index + 1}`,
    favoriteTime: '2024-01-01 10:00:00'
  }))
  pagination.value.total = 100
}

// 处理页码变化
const handlePageChange = (page) => {
  pagination.value.currentPage = page
  loadProducts()
}

// 处理筛选条件变化
const handleFilterChange = () => {
  pagination.value.currentPage = 1
  loadProducts()
}

// 取消收藏
const handleUnfavorite = (productId) => {
  ElMessage.success('取消收藏成功')
  loadProducts()
}

// 返回个人中心
const goBack = () => {
  router.push('/profile')
}

onMounted(() => {
  loadProducts()
})
</script>

<template>
  <div class="favorite-list">
    <div class="container">
      <el-card>
        <template #header>
          <div class="page-header">
            <div class="header-left">
              <el-button @click="goBack" text>
                <el-icon><ArrowLeft /></el-icon>
                返回
              </el-button>
              <h2>我的收藏</h2>
            </div>
            <div class="header-right">
              <el-select v-model="filters.brand" placeholder="品牌" @change="handleFilterChange">
                <el-option
                  v-for="option in brandOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
              <el-slider
                v-model="filters.priceRange"
                range
                :min="0"
                :max="5000"
                :step="100"
                @change="handleFilterChange"
              >
                <template #start>
                  <span>¥{{ filters.priceRange[0] }}</span>
                </template>
                <template #end>
                  <span>¥{{ filters.priceRange[1] }}</span>
                </template>
              </el-slider>
              <el-select v-model="filters.sortBy" placeholder="排序" @change="handleFilterChange">
                <el-option
                  v-for="option in sortOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </div>
          </div>
        </template>

        <div class="product-grid">
          <el-card v-for="product in products" :key="product.id" class="product-card">
            <div class="product-image">
              <el-image :src="product.image" :alt="product.name" fit="cover" />
              <el-button
                class="unfavorite-button"
                type="danger"
                circle
                @click="handleUnfavorite(product.id)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
            <div class="product-info">
              <h4>{{ product.name }}</h4>
              <p class="brand">{{ product.brand }}</p>
              <p class="price">¥{{ product.price }}</p>
              <p class="time">收藏于 {{ product.favoriteTime }}</p>
            </div>
          </el-card>
        </div>

        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            layout="prev, pager, next"
            @current-change="handlePageChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.favorite-list {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-left h2 {
  margin: 0;
  font-size: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  margin: 24px 0;
}

.product-card {
  border: none;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  aspect-ratio: 1;
}

.product-image .el-image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.unfavorite-button {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.product-card:hover .unfavorite-button {
  opacity: 1;
}

.product-info {
  padding: 12px 0;
}

.product-info h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.brand {
  color: #909399;
  margin: 0 0 8px;
}

.price {
  color: #f56c6c;
  font-weight: bold;
  margin: 0 0 8px;
}

.time {
  color: #909399;
  font-size: 12px;
  margin: 0;
}

.pagination {
  text-align: center;
  margin-top: 24px;
}
</style>